﻿import QtQuick 2.12
import QtGraphicalEffects 1.0
Item {


    id: root

    property string title: ""

    // 按钮样式
    property string button_icon: ""
    property string button_color: "white"
    property string text_color: "#333333"
    property string text_size: config.fontsize
    property string button_border: "transparent"
    property string icon_color: ""
    property var icon_width: idImage.parent.width
    property var icon_height: idImage.parent.height

    // 选中时样式
    property string button_icon_select: button_icon
    property string button_color_select: button_color
    property string text_color_select: text_color
    property string button_border_select: button_border
    property string icon_color_select: icon_color

    // Hover时样式
    property string button_icon_hover: button_icon
    property string button_color_hover: button_color
    property string text_color_hover: text_color
    property string button_border_hover: button_border
    property string icon_color_hover: icon_color

    // 点击时样式
    property string button_icon_press: button_icon
    property string button_color_press: button_color
    property string text_color_press: text_color
    property string button_border_press: button_border
    property string icon_color_press: icon_color

    // 禁用时样式
    property string button_icon_disable: button_icon
    property string button_color_disable: "#F5F5F5"
    property string text_color_disable: "#BFBFBF"
    property string button_border_disable: "#CCCCCC"
    property string icon_color_disable: "#CCCCCC"


    property real radius: 3*dp

    property bool isSelected: false
    property bool isDisabled: false
    property bool isPressed: false
    property bool isHover: false

    // 预设方案
    property bool underlineSelect: false    // 下面带蓝杠的可选中按钮
    property bool defaultMode1: false       // 蓝色按钮（在onCompleted中设置）
    property bool defaultMode2: false       // 白色按钮（在onCompleted中设置）
    property bool defaultMode3: false       // 偏好设置-默认设置选中样式

    // 选中样式
    function setSelect(){
        isSelected = true
    }
    function setUnselect(){
        isSelected = false
    }
    function settype(typeval){
        if(typeval===1){     // 白色按钮
            button_color = "white"
            text_color   = "#333333"
            button_border = "#CCCCCC"
            button_color_press = "#F7FAFE"
        }else if(typeval===2){ // 偏好设置-默认设置选中样式
            button_color = "#E5F0FF"
            text_color   = "#1677FF"
            text_color_hover = "#1677FF"
            button_color_press = "#F7FAFE"
        }
    }


    // 预设方案设置
    Component.onCompleted: {
        if(defaultMode1){       // 蓝色按钮
            button_color = "#1677FF"
            text_color   = "white"
            button_border = "transparent"
            button_color_press = "#1162F3"
            button_color_hover = "#0958d9"
        }else if(defaultMode2){     // 白色按钮
            button_color = "white"
            text_color   = "#333333"
            button_border = "#CCCCCC"
            button_color_press = "#F7FAFE"
            text_color_hover = "#1677FF"
            button_border = "#CCCCCC"
            button_color_hover = "#ecf5ff"
            button_border_hover = "#1677FF"
        }else if(defaultMode3){ // 偏好设置-默认设置选中样式
            button_color = "#E5F0FF"
            text_color   = "#1677FF"
            button_border = "#CCCCCC"
            button_color_press = "#F7FAFE"
        }
    }


    width: 120*dp
    height: 40*dp

    signal released()
    signal released_disabled()

    // 按钮背景
    Rectangle{
        id: idRectangle
        anchors.fill: parent
        color: {
            if(isDisabled){
                return button_color_disable
            }else if(isSelected){
                return button_color_select
            }else if(isPressed){
                return button_color_press
            }else if(isHover){
                return button_color_hover
            }else{
                return button_color
            }
        }
        border.color: {
            if(isDisabled){
                return button_border_disable
            }else if(isSelected){
                return button_border_select
            }else if(isPressed){
                return button_border_press
            }else if(isHover){
                return button_border_hover
            }else{
                return button_border
            }
        }
        radius: underlineSelect ? 0 : root.radius
    }
    // 按钮图标
    Image {
        id: idImage
        height: icon_height
        width: icon_width
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: -title.length*8*dp - 2*dp
        source: {
            if(isDisabled){
                return button_icon_disable
            }else if(isSelected){
                return button_icon_select
            }else if(isPressed){
                return button_icon_press
            }else if(isHover){
                return button_icon_hover
            }else{
                return button_icon
            }
        }
        mipmap: true
        ColorOverlay{
            visible: icon_color!==""
            anchors.fill: parent
            source: parent
            color: {
                if(isDisabled){
                    return icon_color_disable
                }else if(isSelected){
                    return icon_color_select
                }else if(isPressed){
                    return icon_color_press
                }else if(isHover){
                    return icon_color_hover
                }else{
                    return icon_color
                }
            }
        }
    }
    // 按钮文字
    Text{
        id: idText
        font.pixelSize: text_size
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: button_icon==="" ? 0 : 9*dp
        text: title
        color: {
            if(isDisabled){
                return text_color_disable
            }else if(isSelected){
                return text_color_select
            }else if(isPressed){
                return text_color_press
            }else if(isHover){
                return text_color_hover
            }else{
                return text_color
            }
        }
    }


    MouseArea{
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true
        onEntered: {
            isHover = true
        }onExited: {
            isHover = false
        }
        onPressed: {
            isPressed = true
        }
        onReleased: {
            isPressed = false
            if (!isDisabled){
                root.released()
            }else{
                root.released_disabled()
            }
            root.focus = true
        }
    }

    CustomBorder{
        id: underline
        bBorderwidth: 2*dp
        borderColor: "#1677FF"
        visible: underlineSelect && isSelected
    }

}
